<template>
  <div class="tableColumnControl">
    <el-tooltip class="icon" effect="dark" content="权限设置" placement="top">
      <i
        v-if="showAuthBtn"
        type="primary"
        class="el-icon-s-tools"
        @click="showAuthConfig = true"
      ></i>
    </el-tooltip>
    <el-tooltip class="icon" effect="dark" content="个性化设置" placement="top">
      <i
        type="primary"
        class="el-icon-s-grid"
        @click="showUserConfig = true"
        v-if="showUserBtn"
      ></i>
    </el-tooltip>
    <auth-column-config
      :source="source"
      :optionsColumns="tableColumns"
      :show="showAuthConfig"
      @refresh-columns="refreshTable"
      @close="showAuthConfig = false"
    />
    <user-column-config
      :source="source"
      :columnConfig="configData"
      :show="showUserConfig"
      @refresh-columns="refreshTable"
      @close="showUserConfig = false"
    />
  </div>
</template>

<script>
import _ from "lodash";
import userColumnConfig from "./userColumnConfig";
import authColumnConfig from "./authColumnConfig";

export default {
  components: { userColumnConfig, authColumnConfig },
  props: {
    source: {
      type: String,
      default: () => {
        return {};
      }
    },
    optionsColumns: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      tableColumns: [],
      currentUserBusiRoles: "rolea",
      isAdmin: false,
      showUserConfig: false,
      showAuthConfig: false,
      gridRolesRelation: [],
      columns: [],
      configData: [],
      showAuthBtn: false,
      showUserBtn: true,
      componentKey: 0
    };
  },
  mounted() {
    this.init();
  },
  computed: {},
  methods: {
    //初始化设置
    async init() {
      this.showUserBtn =
        process.env.VUE_APP_TABLE_USER_CONFIG === "false" ? false : true;
      //是否开启Table权限控制功能的开关
      const isAuthConfig =
        process.env.VUE_APP_TABLE_AUTH_CONFIG === "false" ? false : true;
      if (isAuthConfig) {
        this.showAuthBtn = isAuthConfig;
        this.gridRolesRelation = await this.$utils.TableColumnControl.getTableAuthConfig(
          this.source
        );
        this.initUserBusiRoles();
        //非管理员需要校验权限
        if (!this.isAdmin) {
          this.checkAuthority();
        }
        this.setDisplayNames();
      }
      this.columns = _.cloneDeep(this.optionsColumns);
      this.setUserColumnConfig();
    },
    //加载权限设置的信息
    checkAuthority() {
      for (let item of this.gridRolesRelation) {
        if (item.roles.length == 0) {
          continue;
        }
        const roles = item.roles;
        const prop = item.prop;
        const index = roles.findIndex(value => {
          return value == this.currentUserBusiRoles;
        });
        if (index == -1) {
          const _index = this.columns.findIndex(value => {
            return value.prop == prop;
          });
          if (_index > -1) {
            this.columns.splice(_index, 1);
          }
        }
      }
    },
    //设置列别名
    setDisplayNames() {
      for (let item of this.columns) {
        const prop = item.prop;
        const column = this.gridRolesRelation.find(value => {
          return value.prop == prop;
        });
        if (column && column.label) {
          item.label = column.label;
        }
      }
      this.tableColumns = this.columns;
    },
    //加载个性化设置信息
    async setUserColumnConfig() {
      let comparisonColumns = [];
      let settingColumns = [];
      //获取源数据中的列表
      let sourceColumns = _.cloneDeep(this.columns);
      const gridId = this.source;
      //需优化从前端数据库取
      let allConifgColumns = _.cloneDeep(
        await this.$utils.TableColumnControl.getConfigByGridId(gridId)
      );
      for (let item of allConifgColumns) {
        if (item.gridId == gridId) {
          item.show == true || item.show == "true"
            ? (item.show = true)
            : (item.show = false);
          item.fixed == true || item.fixed == "true"
            ? (item.fixed = true)
            : (item.fixed = false);
          settingColumns.push(item);
        }
      }
      if (settingColumns.length > 0) {
        for (let column of settingColumns) {
          column.tableId = undefined;
          column.order = undefined;
          const prop = column.prop;
          let _comumn = this.getProp(prop, sourceColumns);
          if (_comumn) {
            const label = _comumn.label;
            column = Object.assign(_comumn, column);
            column.label = label;
            comparisonColumns.push(column);
            this.delProp(prop, sourceColumns);
          }
        }
        comparisonColumns = [...comparisonColumns, ...sourceColumns];
        this.configData = [...comparisonColumns];
      } else {
        sourceColumns.forEach(item => {
          item.gridId = gridId;
          item.show === false ? (item.show = false) : (item.show = true);
          item.fixed === true ? (item.fixed = true) : (item.fixed = false);
        });
        this.configData = sourceColumns;
      }
      this.refreshTable(this.configData);
    },
    getProp(prop, sourceColumns) {
      const column = sourceColumns.find(value => {
        return prop == value.prop;
      });
      return column;
    },
    delProp(prop, array) {
      array.splice(
        array.findIndex(value => value.prop === prop),
        1
      );
    },
    //初始化角色
    initUserBusiRoles() {
      //需要将获取到的角色赋值给currentUserBusiRoles
      const userBusiRoles = this.$utils.UserBusiRoles.getUserBusiRoles();
    },
    //刷新页面Grid
    refreshTable(columns) {
      this.$emit("refresh-columns", columns);
      this.setUserColumnConfig();
    }
  }
};
</script>

<style scoped lang="scss">
.tableColumnControl {
  .icon {
    margin-right: 5px;
  }

  i {
    color: #606266;
    font-size: 22px;
    cursor: pointer;
  }
}
</style>
